<template>
  <div class="dormitory-container">
    <h2 class="title">宿舍信息管理</h2>

    <!-- 搜索 -->
    <el-input v-model="searchQuery" placeholder="搜索宿舍号" class="search-input" />

    <!-- 表格 -->
    <el-table :data="filteredDormitories" border stripe style="width: 100%">
      <el-table-column prop="roomNumber" label="宿舍号"></el-table-column>
      <el-table-column prop="floor" label="楼层"></el-table-column>
      <el-table-column prop="bedCount" label="床位数"></el-table-column>
      <el-table-column prop="availableBeds" label="剩余床位"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑对话框 -->
    <el-dialog :title="isEditing ? '编辑宿舍' : '添加宿舍'" :visible.sync="dialogVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="宿舍号">
          <el-input v-model="form.roomNumber"></el-input>
        </el-form-item>
        <el-form-item label="楼层">
          <el-input-number v-model="form.floor" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="床位数">
          <el-input-number v-model="form.bedCount" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="剩余床位">
          <el-input-number v-model="form.availableBeds" :min="0" :max="form.bedCount"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-button type="primary" @click="openAddDialog" class="add-button">添加宿舍</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      dialogVisible: false,
      isEditing: false,
      form: {
        id: null,
        roomNumber: '',
        floor: 1,
        bedCount: 4,
        availableBeds: 4
      }
    }
  },
  computed: {
    dormitories() {
      return this.$store.getters.dormitories
    },
    filteredDormitories() {
      if (!this.searchQuery) return this.dormitories
      return this.dormitories.filter(d => d.roomNumber.includes(this.searchQuery))
    }
  },
  methods: {
    openAddDialog() {
      this.isEditing = false
      this.form = {
        id: null,
        roomNumber: '',
        floor: 1,
        bedCount: 4,
        availableBeds: 4
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.isEditing = true
      this.form = { ...row }
      this.dialogVisible = true
    },
    handleDelete(id) {
      this.$confirm('确定删除该宿舍吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('deleteDormitory', id)
        this.$message.success('删除成功')
      })
    },
    handleSubmit() {
      if (this.isEditing) {
        this.$store.dispatch('updateDormitory', this.form)
        this.$message.success('更新成功')
      } else {
        this.form.id = Date.now()
        this.$store.dispatch('addDormitory', this.form)
        this.$message.success('添加成功')
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.dormitory-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.title {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

.search-input {
  max-width: 300px;
  margin-bottom: 20px;
}

.add-button {
  margin-top: 20px;
}
</style>